<template>
  <el-container>
    <el-header>
      <Title :title="titleName" :SecTitle="SecTitleName"></Title>
    </el-header>
    <el-main :style="styleMain">
      <el-row :style="styleAddBtn" >
            <el-button  type="success" @click="adddialogFormVisible = true;">
                    添加
            </el-button>
      </el-row>

      <el-row> 
          <el-col>
              <el-table :data='CMDatas'  >
                  <el-table-column label="健康值" prop="healthValue">
                  </el-table-column>
                  <el-table-column label="表现" prop="perform">
                    <template slot-scope="scope">
                          {{getPerform(scope.row.perform)}}
                    </template>
                  </el-table-column>
                    <el-table-column label="报告"  prop="report" width="500%">
                  </el-table-column>
                  <el-table-column label="状态" prop="runStatus">
                    <template slot-scope="scope">
                          {{getPerStatus(scope.row.runStatus)}}
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="200%">
                     <!-- 查看 -->
                        <template slot-scope="scope">
                            <el-button type="text" @click="dialogTableVisible = true;handleClick(scope.row)">查看</el-button>
                            <el-button type="text" @click="dialogFormVisible = true;edit(scope.row)">编辑</el-button>
                            <el-button
                            @click.native.prevent="deleteRow(scope.$index, CMDatas,scope.row.id)"
                            type="text">
                            删除
                            </el-button>
                        </template> 
                  </el-table-column>
              </el-table>
                <!-- 查看弹出框 -->
                <el-dialog title="查看" :visible.sync="dialogTableVisible" center>
                           <el-table
                                :show-header="false"
                                :data="tableData"
                                style="width: 100%;"
                            >
                                <el-table-column prop="name" align="right" width="200%">
                                </el-table-column>
                                <el-table-column prop="data">
                                </el-table-column>
                            </el-table>
                            
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogTableVisible = false">返回</el-button>
                            </div>
                </el-dialog>
                <!-- 编辑弹出框 -->
                <el-dialog title="编辑数据" :visible.sync="dialogFormVisible" center>
                    <el-form  :model="form">
                        <el-form-item label="健康值:">
                        <br>
                        <el-input v-model="form.point1" placeholder="请输入健康值" style="width: 40%;"></el-input>
                        </el-form-item>
                        <el-form-item label="表现:">
                            <br>
                            <el-select v-model="form.performance" placeholder="请选择">
                                <el-option
                                v-for="item in performanceOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                :disabled="item.disabled"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="报告:">
                            <br>
                        <el-input v-model="form.report" placeholder="请输入内容" style="width: 100%;"></el-input>
                        </el-form-item>
                        <el-form-item label="状态">
                            <br>
                            <el-radio-group v-model="form.state">
                            <el-radio label="0">启用</el-radio>
                            <el-radio label="1">禁用</el-radio> 
                            
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="save">确 定</el-button>
                </div> 
                </el-dialog>
                <!-- 添加弹出框 -->
                <el-dialog title="编辑数据" :visible.sync="adddialogFormVisible" center>
                    <el-form  :model="form">
                    <el-form-item label="健康值:">
                        <br>
                        <el-input v-model="form.point1" placeholder="请输入健康值" style="width: 40%;"></el-input>
                    </el-form-item>

                    <el-form-item label="表现:">
                        <br>
                        <el-select v-model="form.performance" placeholder="请选择">
                            <el-option
                            v-for="item in performanceOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            :disabled="item.disabled"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="报告:">
                        <br>
                    <el-input v-model="form.report" placeholder="请输入内容" style="width: 100%;"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <br>
                      <el-radio-group v-model="form.state">
                      <el-radio label="0">启用</el-radio>
                      <el-radio label="1">禁用</el-radio> 
                      </el-radio-group>
                    </el-form-item>
                    </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="adddialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addBtn">确 定</el-button>
                </div> 
                </el-dialog>
          </el-col>
      </el-row>
    </el-main>
   <el-footer :style="styleMain">
        <Paging
        @pagesizeChange="getPagesize"
        @currentPageChange="getCurrentPage"
        :total="total"
        :pagesize="pagesize"
        :currentPage="currentPage"
      ></Paging>    
    </el-footer>
  </el-container>
</template>

<script>
import Title from "../../components/common/title.vue";
import Paging from "../../components/paging/paging.vue";
export default {
  data: function () {
    return {
      //标题
      titleName:'健康管理',
      SecTitleName:'评述管理',
      //主体
      styleMain:{
        padding:"20px 0px",
      },
      styleAddBtn:{
        float:"right",
        zIndex:"3",
        marginBottom:"20px",
      },
      //分页
      total:5,
      pagesize: 4,
      currentPage:1,
      dialogTableVisible: false,
      dialogFormVisible:false,
      adddialogFormVisible:false,
      editID:0,
      //tableData
      CMDatas:[
        {
            healthValue:'',
            perform:'',
            report:'',
            runStatus:'',
        },
      ],
      //查看
      viewData: 
            {
                healthValue:'',
                perform:'',
                report:'',
                runStatus:'',
          },
      // 编辑
      form:{
            point1:'',
            point2:'',
            performance:'',
            report: '',
            state: '',
      },
      performanceOptions: [
        {
          value: "0",
          label: "优秀",
        },
        {
          value: "1",
          label: "良好",
        },
        {
          value: "2",
          label: "差",
        },
      ],
     
    };
  },
  components: {
    Title,
    Paging,
  },
    computed: {
			//因为数据用到了dataform中的数据，所以写在了computed中
			tableData() {
				return [{
						name: "健康值",
						data: this.viewData.healthValue
					},
					{
						name: "表现",
						data: this.viewData.perform
					},
                    {
						name: "报告",
						data: this.viewData.report
					},
                    {
						name: "状态",
						data: this.viewData.runStatus
					}
				]
			},

		},
 created(){
   this.update();
  },
  methods:{
    //加载页面
    update(){
         //页面更新访问后台获取table数据
    this.axios.post("/reportManager/list",{
      page: this.currentPage,
      pageSize: this.pagesize
    },)
    .then((res)=>{
      // console.log(res.data.data)
      this.total=res.data.count
      this.CMDatas=res.data.data
      console.log(this.CMDatas)
    })
    .catch((err)=>{
      console.log('页面更新访问后台获取table数据',err)
    })
    },
    // 查看
    handleClick(row) {
        // console.log(row.id);
        this.axios({
          methods:'get',
          url:'/reportManager/'+row.id,
         
        })
        .then((res)=>{
          // console.log(res.data.data)
          this.viewData=res.data.data;
          this.viewData.runStatus=this.getPerStatus(res.data.data.runStatus)
          this.viewData.perform=this.getPerform(res.data.data.perform)

        })
        .catch((err)=>{
          console.log('/reportManager',err)
        })
      },
       getPerStatus(value){
         console.log(value)
        if(value==0){
          return '启用'
        }else {
          return '禁用'
        }
      },
       getPerform(value){
        if(value==0){
          return '优秀'
        }else if(value==1){
          return '良好'
        }else {
          return '差'
        }
      },
    //编辑
    edit(row){
        this.editID=row.id
    },
    save(){
        // console.log(this.form)
        let healthValueData=this.form.point1
        // let healthValueData=this.form.point1+'-'+this.form.point2
        // console.log(healthValueData)
        this.axios.post('/reportManager/update',
        {
        healthValue: healthValueData,
        id: this.editID,
        perform: this.form.performance,
        report: this.form.report,
        runStatus: this.form.status,
        },)
        .then((res)=>{
          console.log(res.data)
          this.form={
            point1:'',
            point2:'',
            performance:'',
            report: '',
            state: '',
          }
          //更新页面
          this.update();
        })
        .catch((err)=>{
          console.log(err)
        })
    },
  
    //删除
    deleteRow(index, rows,id) {
      // console.log(id)
        this.axios.get('/reportManager/delete/'+id,
        
        )
        .then((res)=>{
          console.log(res)
        })
        .catch((err)=>{
          console.log(err)
        })
        rows.splice(index, 1);

    },
    //添加
    addBtn(){
        // console.log(this.form)
        let healthValueData=this.form.point1
        // let healthValueData=this.form.point1+'-'+this.form.point2
        // console.log(healthValueData)
        this.axios.post('/reportManager/add',
        {
        healthValue: healthValueData,
        // id: this.editID,
        perform: this.form.performance,
        report: this.form.report,
        runStatus: this.form.status,
        },)
        .then((res)=>{
          console.log(res.data)
          this.form={
            point1:'',
            point2:'',
            performance:'',
            report: '',
            state: '',
          }
          //更新页面
          this.update();
        })
        .catch((err)=>{
          console.log(err)
        })
    },
    
    //子组件传入pagesize 分页
    getPagesize(val) {
      this.pagesize = val;
      //更新页面
      this.update();
    },
    //子组件传入CurrentPage
    getCurrentPage(val) {
      this.currentPage = val;
      //更新页面
      this.update();
    },

    },

};
</script>

<style lang="less" scoped>

</style>